import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import {
  LegacyPressable as LegacyRNGHPressable,
  Pressable as RNGHPressable,
  RectButton,
  Touchable,
} from 'react-native-gesture-handler';

export default function EmptyExample() {
  return (
    <View style={styles.container}>
      <Pressable
        style={{ width: 200, height: 100, backgroundColor: 'lightblue' }}
        onPress={() => {
          console.log('Pressed!');
        }}
        onPressIn={() => {
          console.log('Press In!');
        }}
        onPressOut={() => {
          console.log('Press Out!');
        }}
        onLongPress={() => {
          console.log('Long Press!');
        }}>
        <Text>RN Pressable</Text>
      </Pressable>

      <Touchable
        style={{ width: 200, height: 100, backgroundColor: 'lightgreen' }}
        onPress={() => {
          console.log('Pressed!');
        }}
        onPressIn={() => {
          console.log('Press In!');
        }}
        onPressOut={() => {
          console.log('Press Out!');
        }}
        onLongPress={() => {
          console.log('Long Press!');
        }}>
        <Text>RNGH Touchable</Text>
      </Touchable>

      <Touchable
        style={{ width: 200, height: 100, backgroundColor: 'lightcoral' }}
        accessibilityActions={[
          {
            name: 'activate',
            label: `Activate`,
          },
          {
            name: 'longpress',
            label: `Long Press`,
          },
        ]}
        onAccessibilityAction={(e) => {
          console.log(e.nativeEvent);
        }}>
        <Text>RNGH Touchable with accessibilityActions</Text>
      </Touchable>

      <RNGHPressable
        style={{ width: 200, height: 100, backgroundColor: 'red' }}
        onPress={() => {
          console.log('Pressed!');
        }}
        onPressIn={() => {
          console.log('Press In!');
        }}
        onPressOut={() => {
          console.log('Press Out!');
        }}
        onLongPress={() => {
          console.log('Long Press!');
        }}>
        <Text>RNGH Pressable</Text>
      </RNGHPressable>

      <LegacyRNGHPressable
        style={{ width: 200, height: 100, backgroundColor: 'pink' }}
        onPress={() => {
          console.log('Pressed!');
        }}
        onPressIn={() => {
          console.log('Press In!');
        }}
        onPressOut={() => {
          console.log('Press Out!');
        }}
        onLongPress={() => {
          console.log('Long Press!');
        }}>
        <Text>RNGH Legacy Pressable</Text>
      </LegacyRNGHPressable>

      <RectButton
        style={{ width: 200, height: 100, backgroundColor: 'green' }}
        onPress={() => {
          console.log('Pressed!');
        }}
        onLongPress={() => {
          console.log('Long Press!');
        }}>
        <Text>RNGH RectButton</Text>
      </RectButton>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});